<template>
    <view class="container">
        <uni-nav-bar
            dark
            color="#fff"
            shadow
            status-bar
            left-icon="left"
            title="组件使用示例"
            fixed
            @click-left="$router.back()"
        />

        <view
            v-show="!showSign"
            class="content"
        >
            <uni-section
                title="图片上传"
                type="line"
            />

            <image-uploader
                :limit="3"
                @get-img="getImg"
            />

            <button
                class="sign-button"
                type="primary"
                size="mini"
                @click="showSign = true"
            >
                电子签名
            </button>

            <button
                class="sign-button"
                type="primary"
                size="mini"
                @click="goDemo()"
            >
                公共列表
            </button>

            <view>count：{{ counter.count }}</view>
        </view>

        <!-- 电子签名组件 -->
        <view
            v-if="showSign"
            class="sign-box"
            :style="{height: `calc(100vh - ${statusBarHeight + 44}px)`}"
        >
            <Sign
                @cancel="showSign = false"
                @confirm="getSignImg"
            />
        </view>
    </view>
</template>

<script setup>
    import { onLoad, onShow } from '@dcloudio/uni-app';
    import { ref, reactive, inject } from 'vue';
    import { useCounterStore } from '@/stores/counter';

    import ImageUploader from '@/components/ImageUploader.vue';
    import Sign from '@/components/Sign.vue';

    const router = inject('$router');
    const storage = inject('$storage');

    let statusBarHeight = ref(storage.get('statusBarHeight'));

    // 图片上传回调
    const getImg = (e) => {
        console.log(e);
    };

    // 电子签名
    let showSign = ref(false);
    // 电子签名回调
    const getSignImg = (e) => {
        console.log(e);
        showSign.value = false;
    };

    const goDemo = () => {
        router.go('/pages/LoadMoreList/LoadMoreList');
    };

    const counter = useCounterStore();
</script>

<style lang="less" scoped>
    .sign-box{
        width: 100%;
    }
    .sign-button{
        margin-top: 24rpx;
        margin-right: 24rpx;
    }
</style>
